<template>
  <div class="app_container">
    <appHeader title="兑换记录查询" />
    <div class="container">
      <div class="home">
        <main class="main">
          <el-input v-model="code" placeholder="请输入兑换码"></el-input>
          <div class="select-btns">
            <el-button type="primary" icon="el-icon-search" @click="select">查询</el-button>
            <el-button icon="el-icon-refresh" @click="reset">重置结果</el-button>
            <el-button class="goIndex" icon="el-icon-back" @click="goIndex">回首页</el-button>
          </div>
          <div class="contents">
            <el-row>
              <el-col :span="24" class="col">
                <div class="label">游戏: </div>
                <div class="value">{{ model.gid }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">兑换码: </div>
                <div class="value">
                  <el-tag @click="codeClick(model.code)">{{ model.code }}</el-tag>
                </div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">充值账号: </div>
                <div class="value">{{ model.topupAccount }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">账号类型: </div>
                <div class="value">{{ model.accountType }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">游戏区服: </div>
                <div class="value">{{ model.gameArea }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">设备类型: </div>
                <div class="value">{{ model.deviceType }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">创建时间: </div>
                <div class="value">{{ model.createTime }}</div>
              </el-col>
            </el-row>
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import appHeader from './components/appHeader.vue'
import { getAction } from '@/api/manage'
export default {
  components: {
    appHeader
  },
  mixins: [],
  props: {},
  data() {
    return {
      code: '',
      model: {},
      gameList: []
    }
  },
  created() {},
  mounted() {},
  methods: {
    goIndex() {
      this.$router.push('/index')
    },
    reset() {
      this.model = {}
    },
    select() {
      this.$store.dispatch('app/setLoading', true)
      getAction('script/gameList.aspx?action=searchRecord', { code: this.code }).then((res) => {
        if (res.code === 1) {
          this.model = res.data || {}
          this.$message.success(res.message || '操作成功！')
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    async codeClick(c) {
      try {
        await navigator.clipboard.writeText(c)
        this.$message.success('复制成功: ' + c)
      } catch (err) {
        this.fallbackCopyToClipboard(c)
      }
    },
    fallbackCopyToClipboard(text) {
      const tempTextarea = document.createElement('textarea')
      tempTextarea.value = text
      document.body.appendChild(tempTextarea)
      tempTextarea.select()
      document.execCommand('copy')
      document.body.removeChild(tempTextarea)
      console.log('兑换码复制成功: ', text)
    }
  }
}
</script>

<style lang="scss" scoped>
.app_container{
  width: 100%;
  background-image: url('../assets/home_bg.png');
  background-size: cover;
}
.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .home{
    width: 100%;
    max-width: 800px;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 10px;
    .main{
      width: 100%;
      background-color: #fff3;
      padding: 10px;
      color: #666;
      box-sizing: border-box;
      border-radius: 10px;
      .select-btns{
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
.el-button--medium{
  padding: 10px;
}
.contents{
  padding: 20px 0;
  .col{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;
    .label{
      text-align: right;
      color: #666;
      min-width: 60px;
    }
    .value{
      flex: 1;
      margin-left: 5px;
      color: #333;
    }
  }
}
</style>>